<template>
	<view class="repair-page">
		<!-- 状态展示区 -->
		<view class="status-section">
			<view class="status-dot" :style="{ background: currentStatusColor }"></view>
			<text class="status-text">{{ currentStatus }}</text>
			<text class="status-subtext">{{ currentStatusDesc }}</text>
		</view>

		<!-- 进度时间轴 -->
		<view class="progress-card">
			<view class="section-title">维修流程</view>
			<view class="timeline">
				<view class="timeline-item" v-for="(item, index) in timelineData" :key="index" :class="{
					'completed': item.completed,
					'active': item.active,
					'last': index === timelineData.length - 1
				}">
					<view class="dot"></view>
					<view class="line"></view>
					<view class="content">
						<view class="time-info">
							<text class="status">{{ item.status }}</text>
							<text class="time">{{ item.time }}</text>
						</view>
						<text class="status-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 报修信息卡片 -->
		<view class="info-card">
			<view class="section-title">报修信息</view>
			<view class="info-content">
				<view class="info-row">
					<text class="label">报修房屋</text>
					<text class="value">{{ repairDetail.address }}</text>
				</view>
				<view class="info-row">
					<text class="label">维修项目</text>
					<text class="value">{{ repairDetail.project }}</text>
				</view>
				<view class="info-row">
					<text class="label">标题</text>
					<text class="value">{{ repairDetail.title }}</text>
				</view>
				<view class="info-row">
					<text class="label">问题描述</text>
					<text class="value">{{ repairDetail.description || '' }}</text>
				</view>
				<view class="info-row">
					<text class="label">手机号码</text>
					<text class="value">{{ repairDetail.phone || '' }}</text>
				</view>
				<view class="info-row">
					<text class="label">预约日期</text>
					<text class="value">{{ repairDetail.date }}</text>
				</view>
			</view>
		</view>

		<!-- 附件区域新增 -->
		<view class="info-card">
			<view class="section-title">附件</view>
			<view class="attachment-content">
				<!-- 这里放置附件图片 -->
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-modify" type="primary" @click="modifyRepair">修改</button>
			<button class="btn-cancel" @click="cancelRepair">撤销申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairDetail: {
					id: '',
					status: '审核中',
					address: '',
					project: '',
					title: '',
					description: '',
					phone: '',
					date: '',
					timeline: [{
							status: '提交维修申请',
							desc: '提交成功',
							completed: true
						},
						{
							status: '审核中',
							desc: '物业审核中',
							active: true
						}
					]
				},
				timelineData: [], // 时间轴数据
				statusConfig: {
					'0': {
						status: '审核中',
						desc: '物业正在审核'
					},
					'1': {
						status: '处理中',
						desc: '等待维修处理'
					},
					'2': {
						status: '已完成',
						desc: '维修工作已完成'
					}
				}
			}
		},
		onLoad(options) {
			if (!options.repairInfo) {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}

			try {
				const repairInfo = JSON.parse(decodeURIComponent(options.repairInfo));
				// 验证必要字段
				if (!repairInfo.status || !repairInfo.address) {
					throw new Error('维修信息不完整');
				}

				// 更新 repairDetail 数据
				this.repairDetail = {
					...this.repairDetail, // 保留原有的默认值
					...repairInfo, // 使用传入的新值覆盖
					status: this.getStatusCode(repairInfo.status) // 转换状态码
				};

				// 生成时间轴数据
				this.generateTimelineData(this.repairDetail);

			} catch (error) {
				console.error('解析维修信息失败:', error);
				uni.showToast({
					title: '数据解析失败',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			modifyRepair() {
				// 准备需要传递的维修信息
				const repairParams = {
					id: this.repairDetail.id,
					address: this.repairDetail.address,
					project: this.repairDetail.project,
					title: this.repairDetail.title,
					description: this.repairDetail.description,
					phone: this.repairDetail.phone,
					appointmentDate: this.repairDetail.date, // 修改为 appointmentDate 以匹配 apply.vue
					isModify: true // 添加标识，表明是修改操作
				};

				uni.navigateTo({
					url: `/pages/repair/apply/apply?repairInfo=${encodeURIComponent(JSON.stringify(repairParams))}`
				});
			},
			cancelRepair() {
				uni.showModal({
					title: '提示',
					content: '确定要撤销此次维修申请吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用撤销接口
							this.handleCancelRepair();
						}
					}
				})
			},
			async handleCancelRepair() {
				try {
					const result = await uni.request({
						url: 'http://localhost:8500/repair/deleteMaintenanceInfo',
						method: 'GET',
						data: {
							id: this.repairDetail.id
						}
					});
					
					// 检查请求是否成功
					if (result.statusCode === 200) {
						uni.showToast({
							title: '撤销成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error('请求失败');
					}
				} catch (error) {
					console.error('撤销失败:', error);
					uni.showToast({
						title: '撤销失败',
						icon: 'none'
					});
				}
			},
			// 格式化当前时间
			formatCurrentTime() {
				const date = new Date();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				return `${month}/${day} ${hour}:${minute}`;
			},
			// 获取状态描述
			getStatusDesc(status) {
				const statusMap = {
					'审核中': '物业审核中',
					'处理中': '维修人员处理中'
				};
				return statusMap[status] || '处理中';
			},
			/**
			 * 生成时间轴数据
			 * @param {Object} repairInfo - 维修信息对象
			 */
			generateTimelineData(repairInfo) {
				const status = repairInfo.status || '0';
				const currentTime = this.formatCurrentTime();

				// 定义时间轴节点
				const timelineNodes = [{
						key: 'submit',
						status: '提交申请',
						desc: '维修申请已提交',
						completed: true
					},
					{
						key: 'review',
						status: '审核',
						time: this.formatDate(repairInfo.reviewTime),
						activeDesc: '物业正在审核',
						completedDesc: '已审核'
					},
					{
						key: 'process',
						status: '处理',
						time: this.formatDate(repairInfo.processTime),
						activeDesc: '处理中',
						completedDesc: '已处理'
					},
					{
						key: 'complete',
						status: '完成',
						time: this.formatDate(repairInfo.completeTime),
						activeDesc: '已完成',
						completedDesc: '已完成'
					}
				];

				const statusNum = Number(status);
				this.timelineData = timelineNodes.map((node, index) => {
					let completed = false;
					let active = false;
					let nodeStatus = '';
					let desc = '';

					if (statusNum === 0) {
						// 审核中
						if (index === 0) {
							completed = true;
							nodeStatus = '已提交申请';
							desc = node.completedDesc;
						} else if (index === 1) {
							active = true;
							nodeStatus = '审核中';
							desc = node.activeDesc;
						} else {
							nodeStatus = `待${node.status}`;
							desc = `等待${node.status}`;
						}
					} else if (statusNum === 1) {
						// 处理中
						if (index === 0) {
							completed = true;
							nodeStatus = '已提交申请';
							desc = node.completedDesc;
						} else if (index === 1) {
							completed = true;
							nodeStatus = '已审核';
							desc = node.completedDesc;
						} else if (index === 2) {
							active = true;
							nodeStatus = '处理中';
							desc = node.activeDesc;
						} else {
							nodeStatus = `待${node.status}`;
							desc = `等待${node.status}`;
						}
					} else if (statusNum === 2) {
						// 已完成
						if (index === 0) {
							completed = true;
							nodeStatus = '已提交申请';
							desc = node.completedDesc;
						} else if (index === 1) {
							completed = true;
							nodeStatus = '已审核';
							desc = node.completedDesc;
						} else if (index === 2) {
							completed = true;
							nodeStatus = '已处理';
							desc = node.completedDesc;
						} else if (index === 3) {
							active = true;
							nodeStatus = '已完成';
							desc = node.activeDesc;
						}
					}

					return {
						...node,
						status: nodeStatus,
						desc,
						completed,
						active
					};
				});
			},
			/**
			 * 格式化日期
			 * @param {string} dateStr - 日期字符串
			 * @returns {string} 格式化后的日期字符串
			 */
			formatDate(dateStr) {
				if (!dateStr) return ''
				const date = new Date(dateStr)
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hour = String(date.getHours()).padStart(2, '0')
				const minute = String(date.getMinutes()).padStart(2, '0')
				return `${month}/${day} ${hour}:${minute}`
			},
			getStatusCode(statusText) {
				const statusMap = {
					'审核中': '0',
					'处理中': '1',
					'已完成': '2'

				};
				return statusMap[statusText] || '0';
			}
		},
		computed: {
			currentStatus() {
				const status = this.repairDetail.status || '0'
				return this.statusConfig[status]?.status || '审核中'
			},
			currentStatusDesc() {
				const status = this.repairDetail.status || '0'
				return this.statusConfig[status]?.desc || '物业正在审核'
			},
			currentStatusTime() {
				// 根据状态获取对应的时间
				const status = this.repairDetail.status || '0'
				if (status === '0') return this.formatDate(this.repairDetail.reviewTime)
				if (status === '1') return this.formatDate(this.repairDetail.processTime)
				if (status === '2') return this.formatDate(this.repairDetail.completeTime)
				return this.formatDate(this.repairDetail.createTime)
			},
			currentStatusColor() {
				const status = this.repairDetail.status || '0'
				const colorMap = {
					'0': '#00b578', // 审核中
					'1': '#ff9800', // 处理中
					'2': '#007AFF', // 已完成
				}
				return colorMap[status] || '#00b578'
			}
		}
	}
</script>

<style lang="scss">
	.repair-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;
	}

	.status-section {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;

		.status-dot {
			width: 12rpx;
			height: 12rpx;
			background: #00b578;
			border-radius: 50%;
			position: absolute;
			left: 30rpx;
			top: 40rpx;
		}

		.status-text {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-left: 40rpx;
			display: block;
			margin-bottom: 10rpx;
		}

		.status-subtext {
			font-size: 28rpx;
			color: #666;
			margin-left: 40rpx;
			display: block;
		}

		.status-time {
			font-size: 24rpx;
			color: #999;
			position: absolute;
			right: 30rpx;
			top: 40rpx;
		}
	}

	.progress-card,
	.info-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4rpx;
			height: 32rpx;
			background: #007AFF;
		}
	}

	.timeline {
		padding-left: 30rpx;

		.timeline-item {
			position: relative;
			padding-bottom: 40rpx;

			.dot {
				position: absolute;
				left: -36rpx;
				top: 8rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #ddd;
				z-index: 1;
			}

			.line {
				position: absolute;
				left: -30rpx;
				top: 0;
				width: 1px;
				height: 100%;
				background: #eee;
			}

			.content {
				padding-left: 20rpx;
			}

			&.completed {
				.dot {
					background: #007AFF;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						background: rgba(0, 122, 255, 0.2);
						border-radius: 50%;
						left: -4rpx;
						top: -4rpx;
					}
				}

				.line {
					background: #007AFF;
				}

				.status {
					color: #007AFF;
					font-weight: 500;
				}
			}

			&.active {
				&:last-child {
					.dot {
						background: #007AFF;
						border: none;
						width: 12rpx;
						height: 12rpx;

						&::after {
							content: '';
							position: absolute;
							width: 20rpx;
							height: 20rpx;
							background: rgba(0, 122, 255, 0.2);
							border-radius: 50%;
							left: -4rpx;
							top: -4rpx;
						}
					}

					.status {
						color: #007AFF;
					}
				}

				&:not(:last-child) {
					.dot {
						background: #fff;
						border: 2px solid #00b578;
						width: 16rpx;
						height: 16rpx;

						&:not(.completed) {
							animation: pulse 2s infinite;
						}
					}

					.status {
						color: #00b578;
						font-weight: 500;
					}
				}
			}

			&:last-child {
				padding-bottom: 0;

				.line {
					display: none;
				}
			}
		}
	}

	.info-row {
		display: flex;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		line-height: 1.5;

		.label {
			color: #999;
			width: 140rpx;
		}

		.value {
			color: #333;
			flex: 1;
		}
	}

	.bottom-buttons {
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;
		display: flex;
		gap: 20rpx;

		button {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
		}

		.btn-modify {
			background: #007AFF;
		}

		.btn-cancel {
			background: #fff;
			color: #666;
			border: 1rpx solid #ddd;
		}
	}

	.info-card {
		.info-row {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.label {
				width: 160rpx;
			}
		}
	}

	.attachment-content {
		min-height: 200rpx;
		background: #f8f8f8;
		border-radius: 8rpx;
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 0 0 0 rgba(0, 181, 120, 0.4);
		}

		70% {
			box-shadow: 0 0 0 10px rgba(0, 181, 120, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(0, 181, 120, 0);
		}
	}
</style>